<template>
<view class="b-content">
  <view class="tip">
    快去写评价分享你的体验经历吧~
  </view>
  <view class="b-body">
    <view class="m-title">
      订单来源:{{orderInfo.orderSource}}
    </view>
    <view class="m-body flex">
      <img src="@/static/images/m1.png" class="m-img flex-sub" />
      <view class="m-txt flex-twice">
          <view class="m-name">{{orderInfo.orderName}}</view>
          <view class="m-desc">&nbsp;&nbsp;</view>
          <view class="m-price">￥{{orderInfo.orderPay}}</view>
      </view>
      <view class="flex-sub text-right padding-right-sm zt">
        {{orderInfo.orderStatusName}}
      </view>
    </view>
<!--    <view class="o-btn margin-top flex">-->
<!--      <view class="r-btn">分享</view>-->
<!--      <view class="r-btn">加入购入车</view>-->
<!--    </view>-->
    <view class="flex padding-top-lg padding-left-sm padding-right-sm">
      <view class="flex-twice bh">
        订单编号：{{orderInfo.orderId}}
      </view>
      <view class="text-right copy">
        复制
      </view>
    </view>
    <view class="o-time padding-top-sm padding-left-sm padding-right-sm">
      订单时间：{{orderInfo.orderTime}}
    </view>
<!--    <view class="r-btn margin-top-lg d-rigth">删除订单</view>-->
  </view>
</view>
</template>

<script>
import {updateStatus} from '@/common/api/msg'
import {useStore} from "../../common/store";
import {onLoad} from '@dcloudio/uni-app';
import {computed} from "vue";
export default {
  data(){
    return {
      orderInfo:{}
    }
  },
  methods: {
    async updateStatus(id,adminId) {
      await updateStatus(id,adminId).then()
    },
    formatDateTime(date, format){
      console.log('data:',date)
      const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
        A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
      };
      if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(
              RegExp.$1,
              RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
          );
        }
      }
      return format;
    }
  },
  name: "info",
  onLoad() {
    // 从本地缓存中获取数据
    let message = uni.getStorageSync('message');
    let msg  = JSON.parse(message)
    console.log(message)
    let time = msg.orderTime
    if(time) {
      time = time * 1000
      let date = new Date(time)
      console.log('data1:',date,time)
      time = this.formatDateTime(date,'yyyy-MM-dd')
    }
    msg['orderTime'] = time
    this.orderInfo = msg

    if (message.watched != '1') {
       // 网络请求
      const store = useStore();
      console.log('store:',store)
      this.updateStatus(msg.id,store.userId||'0')
    }
  }
}
</script>

<style lang="scss" scoped>
.b-content{
  background: rgb(245,245,245);
  .tip{
    padding-left: 86rpx;
    font-size: 24rpx;
    color: #787878;
    margin-bottom: 40rpx;
    padding-top: 30rpx;
  }
  .b-body{
    background: white;
    margin: 20rpx;
    border-radius: 10rpx;
    .m-title{
      font-size: 32rpx;
      color: #1A1A1A;
      padding-top: 44rpx;
      padding-left: 31rpx;
      padding-bottom: 24rpx;
    }
    .m-body{
      margin-left: 40rpx;
      .m-img{
          width: 150rpx;
          height: 150rpx;
      }
      .m-txt {
        margin-left: 20rpx;
        .m-name{
          font-size: 24rpx;
          color: #313131;
        }
        .m-desc{
          font-size: 20rpx;
          color: #AEAEAE;
          padding: 19rpx 0px 29rpx 0rpx;
        }
        .m-price{
          font-size: 24rpx;
          color: #577FDF;
        }
      }
      .zt{
        font-size: 26rpx;
        color: #EAB769;
        font-weight: 800;
      }
    }
    .o-btn {
      justify-content: flex-end;
    }
    .bh{
      font-size: 30rpx;
      color: #868686;
    }
    .copy{
      font-size: 24rpx;
      color: #EAB769;
    }
    .o-time{
      font-size: 30rpx;
      color: #868686;
    }
    .d-rigth{
      float: right;
    }
  }
  .r-btn{
    width: 164rpx;
    height: 52rpx;
    border-radius: 26rpx;
    border: 1px solid #AEAEAE;
    text-align: center;
    font-weight: 500;
    font-size: 26rpx;
    color: #656565;
    line-height: 52rpx;
    margin-right: 20rpx;
  }
}
</style>
